<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div {
            width: 200px;
            height: 300px;
            padding: 10px;
            border: 10px solid #000;
            background: red;
            /* position: absolute; */
            overflow: auto;
            /* left: 123px;
            top: 234px; */
        }
        
        #outer {
            width: 500px;
            height: 500px;
            background: yellow;
            position: relative;
        }
    </style>
</head>

<body>
    <!-- <div id="outer"> -->
    <div id="div">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio perspiciatis illo error, molestiae asperiores ipsa recusandae autem nobis ex consectetur magnam atque. Deleniti iste minus corporis? Dignissimos aspernatur eos perspiciatis?Lorem ipsum
        dolor, sit amet consectetur adipisicing elit. Odio perspiciatis illo error, molestiae asperiores ipsa recusandae autem nobis ex consectetur magnam atque. Deleniti iste minus corporis? Dignissimos aspernatur eos perspiciatis?Lorem ipsum dolor,
        sit amet consectetur adipisicing elit. Odio perspiciatis illo error, molestiae asperiores ipsa recusandae autem nobis ex consectetur magnam atque. Deleniti iste minus corporis? Dignissimos aspernatur eos perspiciatis?
    </div>
    <input type="submit" value="注册" disabled>
    <!-- </div> -->


    <script>
        // div.style.background = "yellow";
        // console.log(div.style.background)
        // console.log(div.currentstyle.background)
        // let x = window.getComputedStyle('div', false)
        // console.log(x)

        // let h1 = div.clientHeight;
        // console.log(h1)
        // let h2 = div.offsetHeight;
        // console.log(h2)
        // let x = div.offsetParent;
        // console.log(x);
        // let l = div.offsetLeft;
        // console.log(l);
        // let st = div.scrollHeight;
        // console.log(st)
        // div.onscroll = function() {
        //         let st2 = div.scrollTop;
        //         let s1 = div.scrollHeight;
        //         let h = div.clientHeight;
        //         let sum = st2 + h
        //         if (sum == s1) {
        //             document.querySelector("[type=submit]").disabled = false;
        //         }
        //     }
        // console.log(window.getComputedStyle(div, null)['background']);
        // // JavaScript Document //获取dom元素样式属性的。//获取对象obj 的样式，属性为 attr 的值；
        // function getStyle(obj, attr) {
        //     if (obj.currentStyle) { //ie
        //         return obj.currentStyle[attr];
        //     } else {
        //         return window.getComputedStyle(obj, false)[attr]; //非ie
        //     }
        // }
    </script>
</body>

</html>